<template>
	<view>
		<u-notify ref="uNotify" message=""></u-notify>
		<u-modal :show="modalModel.isModalShow" :title="modalModel.title" @confirm="modalConfirm">
			<view class="slot-content">
				<rich-text :nodes="modalModel.content"></rich-text>
			</view>
		</u-modal>
		<view class="login" v-show="!islogin">
			<view class="content dingbu">
				<!-- 主体表单 -->
				<view class="main">
					<u-form ref="loginForm" :model="loginmodel" :rules="loginRules" errorType="border-bottom">
						<u-form-item prop="userlogininfo.name" borderBottom labelWidth="120rpx" label="用户名"
							ref="itemUserLoginInfoName">
							<wInput v-model="loginmodel.userlogininfo.name" type="text" placeholder="用户名" :focus="true">
							</wInput>
						</u-form-item>
						<u-form-item prop="userlogininfo.password" borderBottom labelWidth="120rpx" label="密码"
							ref="itemUserLoginInfoPassword">
							<wInput v-model="loginmodel.userlogininfo.password" type="password" placeholder="密码"
								isShowPass></wInput>
						</u-form-item>
						<u-form-item prop="userlogininfo.captchacode" borderBottom labelWidth="120rpx" label="验证码"
							ref="itemUserLoginInfoCaptchacode">
							<u-input v-model="loginmodel.userlogininfo.captchacode" border="surround" shape="circle"
								placeholder="验证码">
								<u-image @click="refreshtCaptcha" slot="suffix"
									:src="'data:image/gif;base64,' + imgbase64" width="170rpx" height="60rpx"></u-image>
							</u-input>
						</u-form-item>
					</u-form>

				</view>
				<wButton class="wbutton" @click="clickLogin" text="登 录"></wButton>
				<!-- 其他登录 -->
				<view class="other_login cuIcon">
					<view class="login_icon">
						<!-- #ifdef MP-WEIXIN -->
						<u-image @click="wxLogin" src="https://api.femacise.cn/ico/wx.png" width="64rpx"
							height="64rpx"></u-image>
						<!-- #endif -->
					</view>
				</view>

				<!-- 底部信息 -->
				<view class="footer">
					<navigator url="/pages/forget/forget" open-type="navigate">找回密码</navigator>
					<text>|</text>
					<navigator url="/pages/register/register" open-type="navigate">注册账号</navigator>
				</view>
			</view>
		</view>
		<view v-show="islogin">
			<view class="user">
				<!-- 头部 -->
				<view class="user-wrap">
					<view class="info">
						<image class="avatar" mode="aspectFill" :src="userinfo.userphoto"></image>
						<view class="nickname">{{userinfo.username}}</view>
					</view>
				</view>

				<!-- 用户功能 -->
				<view class="com-item">
					<view class="com-wrap">
						<view v-if="iswechat == '1' ? false : true " class="cell" @click="clickChangeUserInfo">
							<view class="cell-left">
								<image class="cell-icon" src="https://api.femacise.cn/ico/editprofile.png"
									mode="aspectFill"></image>
								<view class="cell-text">修改个人资料</view>
							</view>
							<view class="iconfont iconmore1"></view>
						</view>
						<view class="cell" @click="clickChangePassword">
							<view class="cell-left">
								<image class="cell-icon" src="https://api.femacise.cn/ico/editpass.png"
									mode="aspectFill"></image>
								<view class="cell-text">修改密码</view>
							</view>
							<view class="iconfont iconmore1"></view>
						</view>
						<view class="cell" @click="clickProfilePicture">
							<view class="cell-left">
								<image class="cell-icon" src="https://api.femacise.cn/ico/txico.png" mode="aspectFill">
								</image>
								<view class="cell-text">修改头像</view>
							</view>
							<view class="iconfont iconmore1"></view>
						</view>
						<!-- #ifdef MP-WEIXIN -->
						<view class="cell" @click="clickBindWeixin">
							<view class="cell-left">
								<image class="cell-icon" src="https://api.femacise.cn/ico/wx.png" mode="aspectFill">
								</image>
								<view class="cell-text">当前账号绑定微信</view>
							</view>
							<view class="iconfont iconmore1"></view>
						</view>
						<view class="cell" @click="clickRelieveWeixin">
							<view class="cell-left">
								<image class="cell-icon" src="https://api.femacise.cn/ico/relievewx.png"
									mode="aspectFill">
								</image>
								<view class="cell-text">当前账号解除绑定微信</view>
							</view>
							<view class="iconfont iconmore1"></view>
						</view>
						<!-- #endif -->
					</view>
				</view>

				<!-- 用户服务 -->
				<view class="com-item">
					<view class="com-wrap">
						<view class="cell" @click="clickFeedback">
							<view class="cell-left">
								<image class="cell-icon" src="https://api.femacise.cn/ico/feedback.png"
									mode="aspectFill"></image>
								<view class="cell-text">问题反馈</view>
							</view>
							<view class="iconfont iconmore1"></view>
						</view>
					</view>
				</view>
				<view class="tcdl">
					<u-button @click="clickLogout" type="error" text="退出登录"></u-button>
				</view>

			</view>
		</view>
		<tab-bar :current="2"></tab-bar>
	</view>
</template>

<script>
	import wInput from '../../components/watch-login/watch-input.vue' //input
	import wButton from '../../components/watch-login/watch-button.vue' //button
	import {
		getCaptchaBase64Api
	} from '@/api/common.js'
	import {
		userLoginApi,
		wxLoginApi,
		bindWeixinApi,
		relieveWeixinApi,
		isOpneidApi
	} from '@/api/users.js'
	import {
		getCommonByNmaeApi
	} from '@/api/systemconfig.js'
	import {
		IsLogin
	} from '@/common/Token.js'
	export default {
		name: 'MyCenter',
		components: {
			wInput,
			wButton,
		},
		data() {
			//是否登录
			const islogin = false
			//登录表单对象
			const loginmodel = {
				userlogininfo: {
					name: '',
					password: '',
					captchacode: '',
					captchaid: ''
				}
			}
			//图片base64
			const imgbase64 = ''
			//表单验证对象
			const loginRules = {
				'userlogininfo.name': {
					type: 'string',
					required: true,
					min: 3,
					max: 10,
					message: '请填写用户名',
					trigger: ['blur', 'change']
				},
				'userlogininfo.password': {
					type: 'string',
					required: true,
					min: 3,
					max: 16,
					message: '请填写密码',
					trigger: ['blur', 'change']
				},
				'userlogininfo.captchacode': {
					type: 'string',
					required: true,
					message: '请填写验证码',
					trigger: ['blur', 'change']
				}
			}
			//弹出窗对象
			const modalModel = {
				isModalShow: false,
				title: '',
				content: ''
			}
			const iswechat = ''
			return {
				islogin,
				loginmodel,
				loginRules,
				imgbase64,
				modalModel,
				iswechat
			}
		},
		computed: {
			userinfo() {
				return this.$store.getters.getUserInfo
			}
		},
		methods: {
			clickLogin() {
				this.$refs.loginForm.setRules(this.loginRules)
				this.$refs.loginForm.validate().then(res => {
					userLoginApi(this.loginmodel.userlogininfo).then(userdata => {
						if (userdata.code === 1) {
							this.setToken(userdata)
						} else {

							//刷新验证码
							this.refreshtCaptcha()
							this.$refs.uNotify.show({
								top: 10,
								type: 'error',
								message: userdata.msg,
								safeAreaInsetTop: false
							})
						}

					})
				}).catch(errors => {
					uni.$u.toast(errors[0].message)
				})
			},
			wxLogin() {
				uni.login({
					provider: 'weixin', //使用微信登录
					success: (isopenidRes) => {
						//查询openid是否存在后台
						isOpneidApi(isopenidRes.code).then(isdata => {
							if (isdata.code === 1) {
								//已经存在调用登录方法
								uni.login({
									provider: 'weixin', //使用微信登录
									success: (loginRes) => {
										wxLoginApi(loginRes.code).then(userdata => {
											if (userdata.code === 1) {
												this.setToken(userdata)
											} else {

												this.$refs.uNotify.show({
													top: 10,
													type: 'error',
													message: userdata.msg,
													safeAreaInsetTop: false
												})
											}
										})
									}
								})

							} else {
								//不存在
								uni.$u.route({
									url: '/pages/register/register',
									type: 'navigateTo'
								})
							}
						})

					}
				})
			},
			setToken(userdata) {
				const date = new Date(userdata.data.refexpdatetime)
				const tokentime = date.getTime()
				this.$store.dispatch('asyncSetToken', {
					token: userdata.data.refreshexpires,
					tokentime: tokentime.toString()
				})
				this.$store.dispatch('asyncSetUserInfo', {
					username: userdata.data.data.name,
					userphoto: userdata.data.data.photo,
					rolecode: userdata.data.data.roleCode
				})
				this.islogin = true
			},
			getCaptcha(capkey) {
				getCaptchaBase64Api(capkey)
					.then(res => {
						if (res.code !== 1) {
							uni.$u.toast("获取验证码失败请控制台查看日志" + res.msg)
						} else {
							this.imgbase64 = res.data.base64
						}
					})
			},
			//刷新验证码
			refreshtCaptcha() {
				this.loginmodel.userlogininfo.captchaid = Math.random().toString(36).substring(2);
				this.getCaptcha(this.loginmodel.userlogininfo.captchaid);
			},
			//退出登录
			clickLogout() {
				this.$store.dispatch('asyncRemoveToken')
				this.islogin = false
			},
			//问题反馈单击事件
			clickFeedback() {
				this.modalModel.isModalShow = true
				this.modalModel.title = '问题反馈'
				this.modalModel.content = '如果您有问题，请发送邮件到:bf.w@qq.com'
			},
			//modal点击确定事件
			modalConfirm() {
				this.modalModel.isModalShow = false
				this.modalModel.title = ''
				this.modalModel.content = ''
			},
			//修改头像点击事件
			clickProfilePicture() {
				uni.$u.route({
					url: '/pages/profilepicture/profilepicture',
					type: 'navigateTo'
				})
			},
			//修改密码点击事件
			clickChangePassword() {
				uni.$u.route({
					url: '/pages/changepassword/changepassword',
					type: 'navigateTo'
				})
			},
			//修改用户资料点击事件
			clickChangeUserInfo() {
				uni.$u.route({
					url: '/pages/updateuserinfo/updateuserinfo',
					type: 'navigateTo'
				})
			},
			//绑定微信
			clickBindWeixin() {
				uni.login({
					provider: 'weixin', //使用微信登录
					success: (loginRes) => {
						bindWeixinApi(loginRes.code).then(res => {
							if (res.code === 1) {
								this.$refs.uNotify.show({
									top: 10,
									type: 'success',
									message: res.msg,
									safeAreaInsetTop: false
								})
							} else {

								this.$refs.uNotify.show({
									top: 10,
									type: 'error',
									message: res.msg,
									safeAreaInsetTop: false
								})
							}
						})
					}
				})
			},
			//解绑微信
			clickRelieveWeixin() {
				relieveWeixinApi().then(res => {
					if (res.code === 1) {
						this.$refs.uNotify.show({
							top: 10,
							type: 'success',
							message: '解除绑定成功',
							safeAreaInsetTop: false
						})
					} else {

						this.$refs.uNotify.show({
							top: 10,
							type: 'error',
							message: res.msg,
							safeAreaInsetTop: false
						})
					}
				})
			},
			//获取系统参数
			getCommonByNmae() {
				getCommonByNmaeApi("iswechat").then(res => {
					if (res.code === 1) {
						this.iswechat = res.data.value
					}
				})
			}
		},
		onLoad() {
			//获取系统参数
			this.getCommonByNmae()
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.loginForm.setRules(this.loginRules)
		},
		onShow() {
			//判断用户是否登录
			if (IsLogin()) {
				this.islogin = true
			} else {
				this.islogin = false
				this.loginmodel.userlogininfo.name = ''
				this.loginmodel.userlogininfo.password = ''
				this.loginmodel.userlogininfo.captchacode = ''
				//刷新验证码
				this.refreshtCaptcha()
			}
		}
	}
</script>

<style lang="scss">
	@import url("@/common/css/icon.css");
	@import url("@/common/css/main.css");

	.dingbu {
		margin-top: 80upx;
	}

	.tcdl {
		padding: 20upx 20upx 20upx 20upx;
	}

	page {
		background: #f2f2f2;
	}

	.btn-hover {
		background: #f2f2f2 !important;
	}

	.user {
		.user-wrap {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 50vw;
			padding: 30rpx;
			z-index: 9;
			border-radius: 0 0 20% 20%;
			background: url('https://api.femacise.cn/img/grzx.webp') no-repeat;
			background-size: cover;

			.setting {
				color: #fff;
				position: absolute;
				top: 60rpx;
				left: 60rpx;
				font-size: 50rpx;
			}

			.info {
				position: absolute;
				text-align: center;

				.avatar {
					width: 150rpx;
					height: 150rpx;
					border-radius: 50%;
				}

				.nickname {
					color: #fff;
					font-size: 28rpx;
				}
			}
		}

		.com-item {
			padding-left: 20rpx;
			padding-right: 20rpx;
			margin-top: 20rpx;

			.com-wrap {
				border-radius: 25rpx;
				overflow: hidden;
			}
		}

		.cell {
			height: 80rpx;
			padding-left: 20rpx;
			padding-right: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #fff;
			border-bottom: 1px solid #f8f8f8;

			&:active {
				background: #f2f2f2;
			}

			&:last-child {
				border-bottom: none !important;
			}

			.cell-left {
				display: flex;
				align-items: center;

				.cell-icon {
					width: 50rpx;
					height: 50rpx;
				}

				.cell-text {
					color: #666;
					font-size: 28rpx;
					margin-left: 20rpx;
				}
			}

			.iconfont {
				font-size: 40rpx;
				color: #999;
			}
		}
	}
</style>